<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详情页</title>
    <link rel="stylesheet" href="../css/details.css">
    <link rel="stylesheet" href="../css/animate.css">
    <link rel="stylesheet" href="../css/iconfont.css">
</head>
<body>
<div class="web">
    <header>
        <div class="container clearfix">
            <div class="header_nav">
                <a href="index.html">小米商城</a>
                <span class="line">|</span>
                <a href="login.html">MIUI</a>
                <span class="line">|</span>
                <a href="list.html">米聊</a>
                <span class="line">|</span>
                <a href="personal.html">游戏</a>
                <span class="line">|</span>
                <a href="details.html">多看阅读</a>
                <span class="line">|</span>
                <a href="#">云服务</a>
                <span class="line">|</span>
                <a href="#">金融</a>
                <span class="line">|</span>
                <a href="#">小米商城移动版</a>
                <span class="line">|</span>
                <a href="#">问题反馈</a>
                <span class="line">|</span>
                <a href="#">Select Region</a>
            </div>
            <div class="topbar-cart">
                <a href=""><i class="iconfont icon-gouwuche"></i>购物车<span class="cart_num">（0）</span></a>
                <div class="cart_menu">
                    <p class="loading">购物车中还没有商品，赶紧选购吧！</p>
                </div>
            </div>
            <div class="header_info">
                <a href="">登陆</a>
                <span class="line">|</span>
                <a href="">注册</a>
                <span class="line">|</span>
                <a href="">消息通知</a>
            </div>
        </div>
    </header>
    <section>
        <div class="container">
            <div class="nav clearfix">
                <div class="logo">
                    <a href="index.html" href="#"></a>
                </div>
                <div class="imggif">
                    <a href="#"></a>
                </div>
                <div class="nav-list">
                    <ul>
                        <li><a href="#">小米手机</a></li>
                        <li><a href="#">红米</a></li>
                        <li><a href="#">平板 · 笔记本</a></li>
                        <li><a href="#">电视</a></li>
                        <li><a href="#">盒子 · 影音</a></li>
                        <li><a href="#">路由器</a></li>
                        <li><a href="#">智能硬件</a></li>
                        <li><a href="#">服务</a></li>
                        <li><a href="#">社区</a></li>
                    </ul>
                </div>
                <div class="search">
                    <form action="" method="get">
                        <input type="text" class="search_div">
                        <input type="submit" class="iconfont search_button" value="&#xe669;">
                        <div class="search_list" onblur="">
                            <ul>
                                <li><a href="#">小米盒子<span>约8件</span></a></li>
                                <li><a href="#">小米盒子<span>约8件</span></a></li>
                                <li><a href="#">小米盒子<span>约8件</span></a></li>
                                <li><a href="#">小米盒子<span>约8件</span></a></li>
                                <li><a href="#">小米盒子<span>约8件</span></a></li>
                                <li><a href="#">小米盒子<span>约8件</span></a></li>
                                <li><a href="#">小米盒子<span>约8件</span></a></li>
                                <li><a href="#">小米盒子<span>约8件</span></a></li>
                                <li><a href="#">小米盒子<span>约8件</span></a></li>
                            </ul>
                        </div>
                    </form>
                </div>
            </div>
            <div class="product_parameters clearfix">
                <h2>小米6</h2>
                <div class="parameters_right fr">
                    <a href="#" class="active">概述</a>
                    <span class="line">|</span>
                    <a href="#">变焦双摄</a>
                    <span class="line">|</span>
                    <a href="#">设计</a>
                    <span class="line">|</span>
                    <a href="#">参数</a>
                    <span class="line">|</span>
                    <a href="#">F码通道</a>
                    <span class="line">|</span>
                    <a href="#">用户评价</a>
                    <a href="#" class="parameters_btn">立即购买</a>
                </div>
            </div>
        </div>
        <div class="detail_content">
            <div class="detail_div detail_div_introduce">
                <div class="introduce_info">
                    <h1>小米 6</h1>
                    <h1>变焦双摄，拍人更美小米 6</h1>
                    <p>骁龙835 旗舰处理器， 6GB 大内存 |  5.15" 护眼屏 | 四曲面陶瓷 / 玻璃</p>
                </div>
            </div>
            <div class="detail_div detail_div_design">
                <div class="design_info">
                    <h2>七年工艺探索的梦幻之作</h2>
                    <p>
                        就像每一代小米旗舰的发布，小米6 依然是新一代性能怪兽，率先搭载骁龙835 旗舰处理器，6GB 大内存。<br/>
                        首次在 5.15" 小米手机上，配备了光学变焦双摄相机，带来更美的人像效果。而在工艺上，四曲面玻璃与陶瓷两种材质 <br/>
                        的流光溢彩，与不锈钢高亮的金属光泽交相辉映。小米6，就是我们 7 年工艺探索的梦幻之作。
                    </p>
                    <div class="design_video">
                        <a href=""><i></i>《听雷军讲述小米 7 年工艺探索》</a>
                        <a href=""><i></i>《小米6 亮银探索版 工艺黑科技》</a>
                    </div>
                </div>
            </div>
            <div class="detail_div detail_div_smooth">
                <div class="smooth_info">
                    <h2>流光溢彩 温润如玉</h2>
                    <p>梦幻般的四曲面玻璃机身与不锈钢高亮边框设计</p>
                    <a href="#" class="smooth_play"></a>
                </div>
                <div class="video-con">
                    <video class="video" preload="auto" autoplay="autoplay" height="900" loop="loop">
                        <source src="../media/xiaomi.mp4" type="video/mp4">
                    </video>
                </div>
                <div class="div_more">
                    <p>查看更多细节</p>
                    <a href="" class="more_img">
                    </a>
                    <p></p>
                </div>
            </div>
            <div class="detail_div detail_div_camera">
                <div class="camera_info">
                    <h2>变焦双摄, 拍人更美</h2>
                    <p>
                        2 倍光学无损变焦双摄，单反般背景虚化效果<br/>
                        还有独特的 4 轴光学防抖，弱光环境下也能拍出好照片
                    </p>
                    <ul>
                        <li>
                            <h1>2倍</h1>
                            <span>ZOOM 光学变焦</span>
                        </li>
                        <li>
                            <h1>4轴</h1>
                            <span>OIS 光学防抖</span>
                        </li>
                        <li>
                            <h1>12MP</h1>
                            <span>广角 / 长焦摄像头</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="detail_div detail_div_photos">
                <div class="photos_all">
                    <ul>
                        <li>
                            <img src="../img/details/photos-group01_1.jpg" alt="">
                        </li>
                        <li>
                            <img src="../img/details/photos-group02_1.jpg" alt="">
                        </li>
                        <li>
                            <img src="../img/details/photos-group03_1.jpg" alt="">
                        </li>
                        <li>
                            <img src="../img/details/photos-group04_1.jpg" alt="">
                        </li>
                        <li>
                            <img src="../img/details/photos-group05_1.jpg" alt="">
                        </li>
                        <li>
                            <img src="../img/details/photos-group06_1.jpg" alt="">
                        </li>
                        <li>
                            <img src="../img/details/photos-group07_1.jpg" alt="">
                        </li>
                    </ul>
                </div>
                <div class="arrow">
                    <span class="arrow_left"></span>
                    <span class="arrow_right"></span>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <div class="container">
            <div class="footer_service">
                <ul class="clearfix">
                    <li>
                        <a href="#">
                            <i class="iconfont icon-weixiu"></i>
                            预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-weixiu"></i>
                            预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-weixiu"></i>
                            预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-weixiu"></i>
                            预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-weixiu"></i>
                            预约维修服务
                        </a>
                    </li>
                </ul>
            </div>
            <div class="footer_link clearfix">
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="">账户管理</a></dd>
                    <dd><a href="">购物指南</a></dd>
                    <dd><a href="">订单操作</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="">账户管理</a></dd>
                    <dd><a href="">购物指南</a></dd>
                    <dd><a href="">订单操作</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="">账户管理</a></dd>
                    <dd><a href="">购物指南</a></dd>
                    <dd><a href="">订单操作</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="">账户管理</a></dd>
                    <dd><a href="">购物指南</a></dd>
                    <dd><a href="">订单操作</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="">账户管理</a></dd>
                    <dd><a href="">购物指南</a></dd>
                    <dd><a href="">订单操作</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="">账户管理</a></dd>
                    <dd><a href="">购物指南</a></dd>
                    <dd><a href="">订单操作</a></dd>
                </dl>
                <div class="contact">
                    <p class="phone">400-100-5678</p>
                    <p>周一至周日 8:00-18:00</p>
                    <p>（仅收市话费）</p>
                    <a href="#" class="contact_btn"><i class="iconfont icon-yingyuanxinxishuaqia"></i> 24小时在线客服</a>
                </div>
            </div>
        </div>
        <div class="bg_grey">
            <div class="container index_container footer_info clearfix">
                <div class="footer_logo"></div>
                <div class="footer_info_text">
                    <p class="footer_alink">
                        <a href="">小米商城</a>
                        <span>|</span>
                        <a href="">小米商城</a>
                        <span>|</span>
                        <a href="">小米商城</a>
                        <span>|</span>
                        <a href="">小米商城</a>
                        <span>|</span>
                        <a href="">小米商城</a>
                        <span>|</span>
                        <a href="">小米商城</a>
                        <span>|</span>
                        <a href="">小米商城</a>
                        <span>|</span>
                        <a href="">小米商城</a>
                        <span>|</span>
                        <a href="">小米商城</a>
                        <span>|</span>
                        <a href="">小米商城</a>
                        <span>|</span>
                        <a href="">小米商城</a>
                        <span>|</span>
                        <a href="">小米商城</a>
                    </p>
                    <p class="">
                        ©
                        <a href="">mi.com</a>
                        京ICP证110507号
                        <a href="">京ICP备10046444号</a>
                        <a href="">京公网安备11010802020134号 </a>
                        <a href="">京网文[2014]0059-0009号</a>
                    </p>
                    <p> 违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
                </div>
                <div class="footer_info_img">
                    <ul>
                        <li>
                            <a href="#">
                                <img src="../img/index/v-logo-2.png" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../img/index/v-logo-2.png" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../img/index/v-logo-2.png" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../img/index/v-logo-2.png" alt="">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="footer_lastTitle"></div>
        </div>
    </footer>
</div>
</body>
</html>